import Title from "@/components/Title";
import { useState } from "react";

const datas = [
    {
        title: "店铺直播盒子",
        desc: "您的全方位电商直播解决方案",
        details: [
            {
                title: "产品简介",
                desc: "它是一款专为解决这些痛点而设计的电商直播解决方案。通过创新技术，我们的产品为商家打造了一个无缝、个性化的直播销售环境",
                style: "bg-[url('/zhibohezi/bg-0-0.png')]",
            },
            {
                title: "核心功能",
                desc: "总部统一直播，归属地精准定位分支所在城市，激活分支同城流量，提升分支引流量及转化效率",
                style: "bg-[url('/zhibohezi/bg-0-1.png')]",
            },
            {
                title: "适用场景",
                desc: "多地区品牌连锁店、在线零售商、电商平台、直播带货活动、产品发布会",
                style: "bg-[url('/zhibohezi/bg-0-2.png')]",
            },
            {
                title: "产品优势",
                desc: "总部集中管理直播团队，可以降低人员成本，确保运营效果统一可控，迅速适应市场变化，有效提升分支机构的市场竞争力",
                style: "bg-[url('/zhibohezi/bg-0-3.png')]",
            },
        ],
    },
    {
        title: "直播盒子",
        desc: "您的全球化电商直播拓展专家",
        details: [
            {
                title: "流畅直播体验",
                desc: "依托全球顶级机房和骨干网络，确保直播过程中无卡顿、低延迟、高清画质",
                style: "bg-[url('/zhibohezi/bg-1-0.png')]",
            },
            {
                title: "多平台同步直播",
                desc: "支持TikTok、亚马逊、抖音等主流平台，实现多账号同时开播，扩大观众覆盖",
                style: "bg-[url('/zhibohezi/bg-1-1.png')]",
            },
            {
                title: "专业级服务保障",
                desc: "简化配置流程，即接即用，由专业团队提供全方位售后支持和维护",
                style: "bg-[url('/zhibohezi/bg-1-2.png')]",
            },
            {
                title: "全球市场拓展",
                desc: "覆盖英国、美国、印尼、泰国、马来西亚、中东等电商热点地区，助力商家全球布局",
                style: "bg-[url('/zhibohezi/bg-1-3.png')]",
            },
            {
                title: "合规安全保障",
                desc: "严格遵守国家政策，采用运营商跨境专线，确保直播活动的合规性与安全性",
                style: "bg-[url('/zhibohezi/bg-1-4.png')]",
            },
            {
                title: "短视频矩阵管理",
                desc: "支持TikTok、YouTube等平台的短视频矩阵运营，满足多IP定制需求，单设备支持多达120台终端接入",
                style: "bg-[url('/zhibohezi/bg-1-5.png')]",
            },
        ],
    },
];

const TabPanels = () => {
    const [active, setActive] = useState(0);
    return (
        <div className="w-full px-6 laptop:max-w-7xlpx-6 flex flex-col laptop:flex-row items-center gap-5">
            <ul className="laptop:h-[19.3rem] w-full laptop:w-fit flex laptop:flex-col items-start justify-center bg-[#F3F9FF] shrink-0 rounded-lg overflow-hidden bg-[linear-gradient(180deg,_white_0%,_rgba(255,255,255,0)_100%)] p-[1px]">
                {datas.map((item, index) => (
                    <li
                        key={index}
                        className={`grow flex flex-col justify-center text-center laptop:gap-3 laptop:text-left cursor-pointer *:z-10 *:relative ${
                            active === index
                                ? "*:text-white after:absolute after:z-0 after:top-0 after:left-0 after:bottom-0 after:right-0 after:bg-[url('/zhibohezi/pt.png'),linear-gradient(20deg,_#446EF3_28%,_rgba(68,110,243,0.6)_64%,_rgba(68,110,243,0.3)_100%)] after:bg-cover after:bg-left after:bg-no-repeat"
                                : ""
                        } ${
                            index === 0
                                ? "laptop:after:rounded-t-[0.48rem]"
                                : "laptop:after:rounded-b-[0.48rem]"
                        } relative px-6 py-4 bg-[#F3F9FF]`}
                        onClick={() => setActive(index)}
                    >
                        <dl className="text-base laptop:text-lg font-medium">
                            {item.title}
                        </dl>
                        <dd className="text-xs laptop:text-sm">{item.desc}</dd>
                    </li>
                ))}
            </ul>
            <div
                className={`grow h-full w-full grid grid-cols-1 ${
                    active === 0 ? "laptop:grid-cols-4" : "laptop:grid-cols-3"
                } gap-5`}
            >
                {datas[active].details.map((item, index) => (
                    <div
                        key={index}
                        className={`flex flex-col justify-between gap-4 ${
                            item.style
                        } ${
                            active === 0
                                ? "laptop:h-[19.3rem]"
                                : "laptop:h-[9rem]"
                        } bg-cover bg-center py-3 px-6 rounded-lg border border-[rgba(255,255,255,0.6)]`}
                    >
                        <div className="flex flex-col gap-4">
                            <p className="flex flex-col leading-9 text-sm font-medium w-full after:h-[1px] after:w-full after:bg-[linear-gradient(90deg,_blue_0%,_rgba(0,85,255,0)_100%)]">
                                {item.title}
                            </p>
                            <p className="text-xs leading-6">{item.desc}</p>
                        </div>
                        <div
                            className={`group flex items-center gap-4 mb-2 cursor-pointer ${
                                active === 1 ? "hidden" : ""
                            }`}
                        >
                            <span className="text-xs text-blue">在线咨询</span>
                            <span className="relative before:block before:h-[1px] before:w-6 group-hover:before:w-10 before:translate-[width] before:bg-blue after:absolute after:-top-[3px] after:right-0 after:block after:h-[7px] after:w-[7px] after:border-t after:border-r after:border-t-blue after:border-r-blue after:rotate-45" />
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

const Zhibohezi = () => {
    return (
        <div className="pb-6 laptop:pb-[10rem] overflow-hidden flex flex-col items-center bg-[url('/zhibohezi/bg.png')] bg-no-repeat origin-center bg-cover">
            <Title desc="本地直播间，全球归属地，国内外市场一键链接">
                获客通直播盒子
            </Title>
            <TabPanels />
        </div>
    );
};

export default Zhibohezi;
